<template>
	<view class="page">
		<flowbefore :beflows="beflows" :status="status" :isBtnClick="isBtnClicks" @save="save" @submit="submit" :statusType="statusType">
			<template>
				<view class="padding-bottom-100">
					<form class="flowform">
						<view class="formlist inputtext">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle"><label>流程标题</label><text class="required">*</text></view>
								<view class="controlvalue">
									<input type="text" v-model="contract.flowTitle" name="flowTitle" :disabled="disabled" />
								</view>
							</view>
						</view>
						<view class="formlist inputtext ">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle"><label>单号编号</label></view>
								<view class="controlvalue">
									<input type="text" v-model="contract.billNo" name="billNo" disabled="true" />
								</view>
							</view>
						</view>
						<view class="formlist inputtext" @tap="flowUrgent">
							<view class="formgroup">
								<view class="labletitle"><label>紧急程度</label><text class="required">*</text></view>
								<view class="controlvalue">
									<input type="text" v-model="contract.flowUrgent" name="flowUrgent" placeholder="选择" disabled="true" />
								</view>
								<view class="advanceicon iconfont icon-xiangyou"></view>
							</view>
						</view>
						<view class="formlist inputtext margin-top-20">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle"><label>甲方单位</label></view>
								<view class="controlvalue">
									<input type="text" v-model="contract.firstPartyUnit" name="firstPartyUnit" placeholder="输入甲方单位" :disabled="disabled" />
								</view>
							</view>
						</view>
						<view class="formlist inputtext ">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle"><label>甲方负责人</label></view>
								<view class="controlvalue">
									<input type="text" v-model="contract.firstPartyPerson" name="firstPartyPerson" placeholder="输入负责人"
									 :disabled="disabled" />
								</view>
							</view>
						</view>
						<view class="formlist inputtext ">
							<view class="formgroup">
								<view class="labletitle"><label>甲方联系方式</label><text class="required">*</text></view>
								<view class="controlvalue">
									<input type="text" v-model="contract.firstPartyContact" name="firstPartyContact" placeholder="输入联系方式"
									 :disabled="disabled" />
								</view>
							</view>
						</view>
						<view class="formlist inputtext margin-top-20">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle"><label>乙方单位</label><text class="required">*</text></view>
								<view class="controlvalue">
									<input type="text" v-model="contract.secondPartyUnit" name="secondPartyUnit" placeholder="输入乙方单位"
									 :disabled="disabled" />
								</view>
							</view>
						</view>
						<view class="formlist inputtext ">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle"><label>乙方负责人</label></view>
								<view class="controlvalue">
									<input type="text" v-model="contract.secondPartyPerson" name="secondPartyPerson" placeholder="输入乙方负责人"
									 :disabled="disabled" />
								</view>
							</view>
						</view>

						<view class="formlist inputtext ">
							<view class="formgroup">
								<view class="labletitle"><label>乙方联系方式</label><text class="required">*</text></view>
								<view class="controlvalue">
									<input type="text" v-model="contract.secondPartyContact" name="secondPartyContact" placeholder="输入联系方式"
									 :disabled="disabled" />
								</view>
							</view>
						</view>
						<view class="formlist inputtext margin-top-20">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle"><label>合同名称</label><text class="required">*</text></view>
								<view class="controlvalue">
									<input type="text" v-model="contract.contractName" name="contractName" placeholder="输入合同名称" :disabled="disabled" />
								</view>
							</view>
						</view>
						<view class="formlist inputtext ">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle"><label>合同分类</label></view>
								<view class="controlvalue">
									<input type="text" v-model="contract.contractClass" name="contractClass" placeholder="输入分类" :disabled="disabled" />
								</view>
							</view>
						</view>
						<view class="formlist inputtext ">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle"><label>合同类型</label></view>
								<view class="controlvalue">
									<input type="text" v-model="contract.contractType" name="contractType" placeholder="输入类型" :disabled="disabled" />
								</view>
							</view>
						</view>
						<view class="formlist inputtext ">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle"><label>合同编号</label><text class="required">*</text></view>
								<view class="controlvalue">
									<input type="text" v-model="contract.contractId" name="contractId" placeholder="输入编号" :disabled="disabled" />
								</view>
							</view>
						</view>
						<view class="formlist inputtext ">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle"><label>业务人员</label></view>
								<view class="controlvalue">
									<input type="text" v-model="contract.businessPerson" name="businessPerson" placeholder="输入业务人员" :disabled="disabled" />
								</view>
							</view>
						</view>
						<view class="formlist inputtext" @tap="signingDate">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle"><label>签约时间</label><text class="required">*</text></view>
								<view class="controlvalue">
									<input type="text" v-model="contract.signingDate" name="signingDate" placeholder="选择" disabled="true" />
								</view>
								<view class="advanceicon iconfont icon-xiangyou"></view>
							</view>
						</view>
						<view class="formlist inputtext" @tap="startDate">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle"><label>开始时间</label><text class="required">*</text></view>
								<view class="controlvalue">
									<input type="text" v-model="contract.startDate" name="startDate" placeholder="选择" disabled="true" />
								</view>
								<view class="advanceicon iconfont icon-xiangyou"></view>
							</view>
						</view>
						<view class="formlist inputtext" @tap="endDate">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle"><label>结束时间</label><text class="required">*</text></view>
								<view class="controlvalue">
									<input type="text" v-model="contract.endDate" name="endDate" placeholder="选择" disabled="true" />
								</view>
								<view class="advanceicon iconfont icon-xiangyou"></view>
							</view>
						</view>
						<view class="formlist inputtext">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle"><label>收入金额</label><text class="required">*</text></view>
								<view class="controlvalue">
									<input type="digit" v-model="contract.incomeAmount" name="incomeAmount" placeholder="输入金额" :disabled="disabled" />
								</view>
							</view>
						</view>
						<view class="formlist inputtext">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle"><label>填写人员</label></view>
								<view class="controlvalue">
									<input type="text" v-model="contract.inputPerson" name="inputPerson" placeholder="输入填写人员" :disabled="disabled" />
								</view>
							</view>
						</view>
						<view class="formlist">
							<view class="formgroup padding-17 border-bottom-E3E3E5">
								<view class="labletitletar"><label>主要内容</label></view>
								<view class="controlvalue  uni-textarea">
									<textarea v-model="contract.primaryCoverage" name="primaryCoverage" maxlength="100" :disabled="disabled"
									 placeholder="输入" />
									</view>
							</view>
						</view>
						<view class="formlist">
							<view class="formgroup  padding-17">
								<view class="labletitletar"><label>备注</label></view>
								<view class="controlvalue  uni-textarea">
									<textarea v-model="contract.description" name="description" maxlength="100" :disabled="disabled" placeholder="输入"/>
								</view>
							</view>
						</view>
						
						<JNPFUpload v-model="fileList" :fileSize='2' :limit='9'></JNPFUpload>
						
					</form>
					<view class="height-100"></view>
				</view>
			</template>
		</flowbefore>
		<w-picker :mode="mode" :pickerList="pickerList" ref="picker" :isSearchShow="isSearchShow"></w-picker>
		<tki-tree ref="tree" :range="treelist" :multiple="multiple" :selectParent="selectParent" rangeKey="fullName"></tki-tree>
	</view>
</template>

<script>
	import jnpf from '@/common/js/jnpf.js'
	import helper from '@/common/js/helper.js'
	import graceChecker from '@/common/js/graceChecker.js'
	import wPicker from '@/components/w-picker/w-picker.vue'
	import flowbefore from '@/components/work/flow-before.vue'
	
	import config from '@/common/js/config.js'
	import tkiTree from '@/components/tki-tree/tki-tree.vue'
	let formRule=[
			{name:"flowTitle",checkType:"notnull",checkRule:"",errorMsg:"输入标题"},
			{name:"contractName",checkType:"notnull",checkRule:"",errorMsg:"输入合同名称"},
			{name:"contractId",checkType:"notnull",checkRule:"",errorMsg:"输入合同编码"},
			{name:"signingDate",checkType:"notnull",checkRule:"",errorMsg:"选择签约时间"},
			{name:"startDate",checkType:"notnull",checkRule:"",errorMsg:"选择开始时间"},
			{name:"endDate",checkType:"notnull",checkRule:"",errorMsg:"选择结束时间"},
			{name:"flowUrgent", checkType : "notnull", checkRule:"",  errorMsg:"选择紧急程度"},
			{name:"firstPartyUnit", checkType : "notnull", checkRule:"",  errorMsg:"输入甲方单位"},
			{name:"firstPartyContact", checkType : "telPhone", checkRule:"",  errorMsg:"输入甲方联系方式"},
			{name:"secondPartyUnit", checkType : "notnull", checkRule:"",  errorMsg:"输入乙方单位"},
			{name:"secondPartyContact", checkType : "telPhone", checkRule:"",  errorMsg:"输入乙方联系方式"},
			{name:"incomeAmount", checkType : "money", checkRule:"",  errorMsg:"输入合格金额"},
		];
	export default {
		components: {
			wPicker,
			flowbefore,
			tkiTree
		},
		data() {
			return {
				mode:'',//底部弹窗分类
				isSearchShow:false,
				disabled:false,//启用
				status:'',//流程状态
				beflows:{
					operstate:"",
					processId:''
				},
				contract: {
					billNo: '',
					flowUrgent: '',
					flowTitle: jnpf.userInfo().realName+'的合同审批',
					firstPartyUnit:'',
					firstPartyPerson:'',
					firstPartyContact:'',
					secondPartyUnit:'',
					secondPartyPerson:'',
					secondPartyContact:'',
					contractName:'',
					contractClass:'',
					contractType:'',
					contractId:'',
					signingDate:'',
					startDate: '',
					endDate: '',
					incomeAmount:'',
					inputPerson:'',
					primaryCoverage:'',
					description:'',
					fileJson:''
				},
				fileList:[],
				
				fileJson:[],
				isBtnClicks:false,
				pickerList:[],
				urgentList:[{
					label: "普通",
					value:"1"
				},
				{
					label: "重要",
					value:"2"
				},
				{
					label: "紧急",
					value:"3"
				}],
				multiple: false, //多选
				selectParent: false, //父级可选
				UserIdList:[],
				treelist:[],
				freeApproverUserId:'',
				statusType:''
			}
		},
		onLoad(e) {
			/* 工作区进入状态 */
			let statusType = uni.getStorageSync("type")
			this.statusType = statusType
			/* 工作区进入状态 End*/
			let flowInfo= JSON.parse(e.flowInfo);
			this.beflows.operstate=flowInfo.operstate;
			if(flowInfo.operstate =='add'){
				this.contract.flowId=flowInfo.id;
				this.status = 0;
				this.contract.flowUrgent=helper.getSpinnerNew(this.urgentList,'1');
				helper.ajax({
					url: '/api/System/BillRule/BillNumber/WF_ContractApprovalNo',
					success: res => {
						this.contract.billNo=res.data.data;
					}
				});
			}
			if(flowInfo.operstate=='info'){
				this.disabled=flowInfo.disabled;
				this.beflows.processId=flowInfo.id;
				this.status=flowInfo.status;
				helper.ajax({
					url: '/api/WorkFlowForm/ContractApproval/' + flowInfo.id,
					success: res => {
						let _contract=res.data.data;
						this.contract = _contract;
						this.contract.flowUrgent=helper.getSpinnerNew(this.urgentList,_contract.flowUrgent);
						this.contract.signingDate=helper.toDate(_contract.signingDate, "yyyy-MM-dd HH:mm");
						this.contract.startDate=helper.toDate(_contract.startDate, "yyyy-MM-dd HH:mm");
						this.contract.endDate=helper.toDate(_contract.endDate, "yyyy-MM-dd HH:mm");
						if (_contract.fileJson!="") {
							this.fileList=JSON.parse(_contract.fileJson);
						}
					}
				});
			}
			helper.ajax({
				url: '/api/Permission/Users/Selector',
				success: res => {
					this.UserIdList = res.data.data.list;
				}
			});
		},
		methods: {
			flowUrgent(e) {
				if(!this.disabled){
					this.pickerList = this.urgentList;
					this.mode="selector";
					this.$refs.picker.show();
					this.$eventHub.$off('popupmodality');
					this.$eventHub.$on('popupmodality', (data) => {
						this.contract.flowUrgent = data.result;
						this.$eventHub.$off('popupmodality');
					});
				}
			},
			signingDate(e){
				if(!this.disabled){
					this.mode="dateTime";
					this.$refs.picker.show();
					this.$eventHub.$off('popupmodality');
					this.$eventHub.$on('popupmodality', (data) => {
						this.contract.signingDate = data.result;
						this.$eventHub.$off('popupmodality');
					});
				}
			},
			startDate(e){
				if(!this.disabled){
					this.mode="dateTime";
					this.$refs.picker.show();
					this.$eventHub.$off('popupmodality');
					this.$eventHub.$on('popupmodality', (data) => {
						this.contract.startDate = data.result;
						this.$eventHub.$off('popupmodality');
					});
				}
			},
			endDate(e){
				if(!this.disabled){
					this.mode="dateTime";
					this.$refs.picker.show();
					this.$eventHub.$off('popupmodality');
					this.$eventHub.$on('popupmodality', (data) => {
						this.contract.endDate = data.result;
						this.$eventHub.$off('popupmodality');
					});
				}
			},
			submit(e){
				this.contract.fileJson = JSON.stringify(this.fileList)
				let formData = this.contract;
				if (!graceChecker.check(formData,formRule)) {
					helper.msg(graceChecker.error);
					return
				}
				this.isBtnClicks=true;
				this.treelist = this.UserIdList;
				this.$refs.tree._show();
				this.$eventHub.$off('treemodality');
				this.$eventHub.$on('treemodality', (data) => {
					this.$eventHub.$off('treemodality');
					formData.flowUrgent=helper.setSpinnerNew(this.urgentList,formData.flowUrgent);
					formData.signingDate = Date.parse(formData.signingDate);
					formData.startDate = Date.parse(formData.startDate);
					formData.endDate = Date.parse(formData.endDate);
					formData.status = 0;
					formData.freeApproverUserId = data[0].id;
					let method = "POST";
					let url = "/api/WorkFlowForm/ContractApproval";
					if(formData.id){
						method = "PUT";
						url=url+"/"+formData.id
					}
					helper.ajax({
						url: url,
						method:method,
						data:formData,
						contentType: "application/json",
						success: res => {
						helper.msg(res.data.msg, 'success');
						if (this.beflows.operstate=='add') {
								uni.redirectTo({
									url: '../../operate/started/started',
									success: res => {},
									fail: () => {},
									complete: () => {}
								});
							}else{
								uni.navigateBack();
							}
							this.isBtnClicks=false
						}
					});
				});
			},
			save(){
				this.contract.fileJson = JSON.stringify(this.fileList)
				let formData=this.contract;
				if (!graceChecker.check(formData,formRule)) {
					helper.msg(graceChecker.error);
					return
				}
				this.isBtnClicks=true;
				formData.flowUrgent=helper.setSpinnerNew(this.urgentList,formData.flowUrgent);
				formData.status = 1;
				let method = "POST";
				let url = "/api/WorkFlowForm/ContractApproval";
				if(formData.id){
					method = "PUT";
					url=url+"/"+formData.id
				}
				formData.signingDate = Date.parse(formData.signingDate);
				formData.startDate = Date.parse(formData.startDate);
				formData.endDate = Date.parse(formData.endDate);
				helper.ajax({
					url: url,
					method:method,
					contentType: "application/json",
					data:formData,
					success: res => {
						helper.msg(res.data.msg, 'success');
						if (this.beflows.operstate=='add') {		
							uni.redirectTo({
								url: '../../operate/started/started',
								success: res => {},
								fail: () => {},
								complete: () => {}
							});
						}else{
							uni.navigateBack();
						}
						this.isBtnClicks=false
					}
				});
			},
			
		},
	}
</script>

<style>
	.required{
		color: red;
	}
</style>
